<template>
  <view class="user-review">
    <!-- 商品信息 -->
    <view class="product-info">
      <image :src="productImage" class="product-image" mode="aspectFill"></image>
      <view class="product-details">
        <text class="product-name">{{ productName }}</text>
        <text class="product-spec">商品属性规格</text>
      </view>
    </view>

    <!-- 评分组件 -->
    <view class="rating-section">
      <text class="rating-label">评分</text>
      <u-rate
        :count="5"
        v-model="rating"
        active-color="#FF9900"
        inactive-color="#99A9BF"
        size="20"
        gutter="4"
      ></u-rate>
      <text class="rating-text">{{ ratingText }}</text>
    </view>

    <!-- 文本输入框 -->
    <view class="review-textarea">
      <u--input
        placeholder="填写高质量的评价，可参与抽奖机会"
        v-model="reviewText"
        border="surround"
        type="textarea"
        maxlength="45"
        autoHeight
        :clearable="false"
      ></u--input>
      <text class="char-count">{{ reviewText.length }}/45</text>
    </view>

    <!-- 图片上传 -->
    <view class="upload-section">
      <text class="upload-label">上传图片</text>
      <u-upload
        :fileList="fileList"
        @afterRead="onRead"
        @delete="onDelete"
        uploadText="上传图片"
        :maxCount="6"
        name="upload1"
      ></u-upload>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-section">
      <u-button
        type="primary"
        text="提交"
        @click="handleSubmit"
        class="submit-button"
        color="#FF9500"
      ></u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productImage: '/static/swy/p10.jpg',
      productName: '甜美V领荷叶袖T恤',
      rating: 4, // 评分值（1-5）
      reviewText: '',
      fileList: [], // 上传的图片列表
    };
  },
  computed: {
    // 根据评分显示文本
    ratingText() {
      const texts = ['非常差', '差', '一般', '满意', '非常满意'];
      return texts[this.rating - 1] || '';
    }
  },
  methods: {
    // 图片上传后触发
    onRead(file) {
      // 支持多文件
      const fileList = file.file;
      if (fileList.length) {
        // 转换为 uView 所需格式
        const newFiles = fileList.map(f => ({
          url: f.path || f.url, // 小程序中 path，H5 中可能是 url
          name: f.name || 'image.jpg'
        }));
        this.fileList = [...this.fileList, ...newFiles];
      } else {
        this.fileList.push({
          url: fileList.path || fileList.url,
          name: fileList.name || 'image.jpg'
        });
      }
    },

    // 删除图片
    onDelete(file) {
      this.fileList = this.fileList.filter(f => f.url !== file.url);
    },

    // 提交评价
    handleSubmit() {
      // 模拟成功提示
      uni.showToast({
        title: '已提交！获得优惠券',
        icon: 'success',
        duration: 1500,
        success: () => {
          // 提示显示完成后跳转页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/reviewed/reviewed'
            });
          }, 1500);
        }
      });

      console.log('提交评价数据：', {
        rating: this.rating,
        reviewText: this.reviewText,
        images: this.fileList.map(f => f.url)
      });

      // TODO: 这里可以调用 API 提交到后端
    }
  }
};
</script>

<style scoped>
.user-review {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}

.product-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 15px;
}

.product-details {
  flex: 1;
}

.product-name {
  display: block;
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.product-spec {
  font-size: 13px;
  color: #999;
}

.rating-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.rating-label {
  margin-right: 15px;
  font-size: 14px;
  color: #333;
}

.rating-text {
  margin-left: 10px;
  font-size: 14px;
  color: #FF9900;
}

.review-textarea {
  position: relative;
  margin-bottom: 20px;
}

.char-count {
  position: absolute;
  bottom: 10px;
  right: 15px;
  font-size: 12px;
  color: #999;
  z-index: 1;
}

.upload-section {
  margin-bottom: 30px;
}

.upload-label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #333;
}

.submit-section {
  text-align: right;
  padding: 0 10px;
}

.submit-button {
  width: 300px;
  height: 40px;
  /* 按钮颜色已通过u-button的color属性设置为#FF9500 */
}
</style>